<template>
	<view class="page">
		<view class="product-list">
			<view class="product m-top" :class=" product.right  " v-for="(product,index) in productList" :key="index" @tap="goBrowser(product.game_name)">
				<view class="image-view ">
					<image v-if="renderImage" class="product-image" :src="product.image"></image>
				</view>
				<view class="product-title">{{product.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
			mapState
		} from 'vuex'
	
	export default {
		data() {
			return {
				title: 'product-list',
				productList: [],
				renderImage: false
			};
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'gameApiUrl', 'gameApiId', 'gameApiSecret']),
		onLoad() {
			console.log('now:' + this.userName);
			console.log('now:' + this.gameApiUrl);
		},
		methods: {
			loadData(action = 'add') {
				const data = [{
						image: '../../../static/pg/10.png',
						title: '夜戏貂蝉',
						right: 'm-right',
						game_name: 'diaochan',
					},
					{
						image: '../../../static/pg/17.png',
						title: '后羿射日',
						right: '',
						game_name: 'legend-of-hou-yi',

					},
					{
						image: '../../../static/pg/16.png',
						title: '万胜狂欢夜',
						right: 'm-right',
						game_name: 'mr-hallow-win',
					},
					{
						image: '../../../static/pg/19.png',
						title: '麻辣火锅',
						right: '',
						game_name: 'hotpot',

					},

					{
						image: '../../../static/pg/12.png',
						title: '鱼跃龙门',
						right: 'm-right',
						game_name: 'dragon-legend',
					},
					{
						image: '../../../static/pg/2.png',
						title: '逆袭的小红帽',
						right: '',
						game_name: 'hood-wolf',

					},

					{
						image: '../../../static/pg/9.png',
						title: '国王的召唤',
						right: 'm-right',
						game_name: 'summon-conquer',
					},
					{
						image: '../../../static/pg/7.png',
						title: '蒸汽朋克',
						right: '',
						game_name: 'steam-punk',

					},

					{
						image: '../../../static/pg/15.png',
						title: '宝石侠',
						right: 'm-right',
						game_name: 'gem-saviour',
					},
					{
						image: '../../../static/pg/14.png',
						title: '抓抓乐',
						right: '',
						game_name: 'plushie-frenzy',

					},
					{
						image: '../../../static/pg/11.png',
						title: '巫师之书',
						right: 'm-right',
						game_name: 'wizdom-wonders',
					},
					{
						image: '../../../static/pg/13.png',
						title: '美式二十一点',
						right: '',
						game_name: 'hotpot',

					},
					{
						image: '../../../static/pg/3.png',
						title: '欧式二十一点',
						right: 'm-right',
						game_name: 'hotpot',
					},
					{
						image: '../../../static/pg/1.png',
						title: '美杜莎',
						right: '',
						game_name: 'medusa',

					},
					{
						image: '../../../static/pg/5.png',
						title: '旺旺旺',
						right: 'm-right',
						game_name: 'win-win-won',
					},
					{
						image: '../../../static/pg/8.png',
						title: '豌豆精灵',
						right: '',
						game_name: 'peas-fairy',

					},

					{
						image: '../../../static/pg/11.png',
						title: '小丑翻翻乐',
						right: 'm-right',
						game_name: 'hotpot',
					},
					{
						image: '../../../static/pg/18.png',
						title: '美杜莎2',
						right: '',
						game_name: 'medusa2',

					},

					{
						image: '../../../static/pg/20.png',
						title: '摇钱树',
						right: 'm-right',
						game_name: 'fortune-tree',
					},
					{
						image: '../../../static/pg/4.png',
						title: '横财来啦',
						right: '',
						game_name: 'fortune-gods',

					},

				];

				if (action === 'refresh') {
					this.productList = [];
				}

				data.forEach(item => {
					this.productList.push(item);
				});
			},
			goBrowser: function(game_name) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '未登录',
						content: '您未登录，需要登录后才能玩游戏',
						/**
						* 如果需要强制登录，不显示取消按钮
						*/
						showCancel: !this.forcedLogin,
						success: (res) => {
							if (res.confirm) {
								/**
								* 如果需要强制登录，使用reLaunch方式
								*/
								if (this.forcedLogin) {
									uni.reLaunch({
										url: '../../user/login'
									})
								} else {
									uni.reLaunch({
										url: '../../user/login'
									});
								}
							}
						}
					});
				} else {
					// #ifdef APP-PLUS
					//fortune-gods
// 					let url = this.gameApiUrl + '&api_method=playGame&username=' + this.userName + '&api_name=PG&game=' + game_name +
// 						'&device=2';
// 					
// 					uni.navigateTo({
// 						url: '../../index/webview?url=' + url,
// 					});
					 plus.runtime.openURL(this.gameApiUrl+'?api_method=playGame&username='+this.userName+'&api_name=PG&device=2&game='+game_name);
					// #endif
					// #ifdef MP-WEIXIN
					uni.showModal({
						
						content: "请复制链接在浏览器里打开",
						showCancel: false
					})
					// #endif
					
				}

				
			}
		},
		onLoad() {
			this.loadData();
			setTimeout(() => {
				this.renderImage = true;
			}, 300);
		},
		onPullDownRefresh() {
// 			this.loadData('refresh');
// 			// 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
// 			setTimeout(() => {
// 				uni.stopPullDownRefresh();
// 			}, 2000);
		},
		onReachBottom() {
			//this.loadData();
		}
	};
</script>

<style>
	page {
		background-color: #eee !important;

	}

	.m-top {
		border-bottom: 1px solid #ccc;
	}

	.m-right {
		border-right: 1px solid #ccc;
	}

	.product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.product {

		display: flex;
		flex-direction: column;
		text-align: center;
		width: 49.5%;
	}

	.image-view {
		height: auto;
		width: auto;
		padding: 20upx;
	}

	.product-image {
		height: 230upx;
		width: 230upx;
	}

	.product-title {
		width: auto;
		font-size: 32upx;
		padding-bottom: 10upx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.product-price {
		font-size: 28upx;
		position: relative;
	}

	.product-price-original {
		color: #e80080;
	}

	.product-price-favour {
		color: #888888;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.product-tip {
		position: absolute;
		right: 10upx;
		background-color: #ff3333;
		color: #ffffff;
		padding: 0 10upx;
		border-radius: 5upx;
	}
</style>
